<template>
    <div class="checkdetail">
        <el-card shadow="always" class="box-card">
            <el-icon size="25" @click="goBack"><Back/></el-icon> | 查看版本
            <!-- 添加、删除、搜索、查询、重置按钮 -->
            <div class="btns">
                <div class="btns_left">
                    <el-button type="primary" @click="addHandle">新增</el-button>
                    <el-button @click="delAll">删除</el-button>
                </div>
                <div class="btns_middle">
                    <el-input v-model="inpValue" placeholder="请输入关键字" clearable />
                </div>
                <div class="btns_right">
                    <el-button type="primary" :icon="Search" @click="searchHandle">查询</el-button>
                    <el-button :icon="RefreshLeft" @click="reset">重置</el-button>
                </div>
            </div>
            <!-- 表格 -->
            <div class="datatable">
                <el-table stripe :data="renderData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                    @selection-change="handleSelectionChange" ref="multipleTableRef" border style="text-align: center;">
                    <el-table-column type="selection" />

                    <el-table-column label="版本缩率图">
                        <template #default="scope"><el-image style="width: 40px; height: 40px;" :src="scope.row.versionImg"
                                :zoom-rate="1.2" :preview-src-list="[scope.row.versionImg]" fit="cover" /></template>
                    </el-table-column>

                    <el-table-column property="name" label="名称" />
                    <el-table-column label="创建时间">
                        <template #default="scope">{{filterTime(scope.row.startTime) }}</template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button link type="primary" size="small" class="cz_btn" @click="()=>{addShow=true;form.name=scope.row.name;form.versionImg=scope.row.versionImg;imageUrl=scope.row.versionImg;typeValue=2;updateId=scope.row.id}">编辑</el-button>
                            <el-button link type="success" size="small" class="cz_btn" @click="toDetails(scope.row.id)">详情</el-button>
                            <el-button link type="danger" size="small" class="cz_btn"
                                @click="delHandle(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="paginations" style="height: 1.7rem;">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="false"
                    :disabled="disabled" :background="true" layout="prev, pager, next, jumper" :total="totalNum"
                    @current-change="handleCurrentChange" style="width: 16rem;float: right;margin-right: 3rem;" />
            </div>
        </el-card>
        <!-- 删除的对话框 -->
        <el-dialog v-model="delShow" title="提示" width="30%" :before-close="handleClose">
            <span>是否确认删除该作品</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="delShow = false">取消</el-button>
                    <el-button type="primary" @click="confirmDel">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 批量删除的对话框 -->
        <el-dialog v-model="delAllShow" title="提示" width="30%" :before-close="handleClose">
            <span>是否确认删除所有选中的作品</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="delAllShow = false">取消</el-button>
                    <el-button type="primary" @click="confirmDelAll">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 添加的对话框 -->
        <el-dialog v-model="addShow" title="新增">
            <el-form :model="form">
                <el-form-item label="封面图" label-width="140px">
                    <el-upload class="avatar-uploader" action="/dev-api/api/uploadimg/"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon">+</i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="名称" label-width="140px">
                    <el-input v-model="form.name" placeholder="请填写"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addShow = false">取消</el-button>
                    <el-button type="primary" @click="doAdd">
                        保存
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
// 导入图标
import { Search, RefreshLeft } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'

import draggable from 'vuedraggable'
// 输入框双向绑定实现
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import service from '@/utils/request.ts'
import { Back,  InfoFilled } from '@element-plus/icons-vue'
import moment from "moment"
// 图片上传的路径
const imageUrl = ref('')
// 过滤方法（格式化时间数据）
const filterTime = (time) => {
    return moment(time).format('YYYY-MM-DD HH:mm:ss')
}
const goBack = ()=>{
    router.back()
}
const reset = ()=>{
    pageSize.value = 5
    inpValue.value = ''
    currentPage.value = 1
    getDateList()
}
const typeValue = ref(1)
const totalNum = ref(0)
const getDateList = async () => {
    const {code,data,total} = await service.get(`/api/draw/versionShow?id=${route.query.id}&page=${currentPage.value}&size=${pageSize.value}&keyword=${inpValue.value}`)
    if(code===200){
        renderData.value = data
        totalNum.value = total
    }
}
const route= useRoute()
onMounted(() => {
    getDateList()
})
// 关键字搜索key
const inpValue = ref('')
// 表格数据
const tableData = ref([])
// 渲染的数据
const renderData = ref([])
// 获取表格节点
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 存储被选择的选项
const multipleSelection = ref<User[]>([])

// 规定表格数据的数据类型
interface User {
    name: string
    versionImg: string
    draw_id_id:Date
}
// 当前页数
const currentPage = ref(1)
// 一页几条
const pageSize = ref(10)
// 控制页码是否可以点击
const disabled = ref(false)
// 控制删除确认框显示隐藏
const delShow = ref(false)
// 要删除的作品的id值
const delid = ref()
// 可控制添加对话框的显示隐藏
const addShow = ref(false)
// 添加作品的数据
const form = reactive({
    name: '',
    versionImg:'',
    draw_id_id:route.query.id
})
const updateId = ref(0)
// 控制删除全部对话框的显示隐藏
const delAllShow = ref(false)

// 操作全选
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

// 改变当前的页数
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getDateList()
}

// 删除数据操作
const delHandle = (id: number) => {
    delShow.value = true
    delid.value = id
}

// 控制对话框关闭
const handleClose = (done: () => void) => {
    done()
}

// 确认删除
const confirmDel =async () => {
    const {code,msg} = await service.delete(`/api/draw/versionDel?id=${delid.value}`)
    if(code===200){
        ElMessage(msg)
        getDateList()
    }
    delShow.value = false
}

// 确认批量删除
const confirmDelAll =async () => {
   const ids = multipleSelection.value.map(item=>item.id)
    const {code,msg} =await service.post(`/api/draw/versionDel`,{ids})
    if(code===200){ 
        ElMessage(msg)
        getDateList()
    }
    delAllShow.value = false
}

// 批量删除
const delAll = () => {
    delAllShow.value = true
}

// 添加作品
const addHandle = () => {
    addShow.value = true
}

// 搜索
const searchHandle = () => {
    getDateList()
}

// 跳转到详情
const router = useRouter()
const toDetails = (id:Number) => {
    router.push(`drawdetails?id=${id}`)
}

// 图片上传
let handleAvatarSuccess = (obj:Object) => {
    imageUrl.value = obj.path
}


// 添加操作
let doAdd=async ()=>{
    addShow.value = false
    form.versionImg=imageUrl.value
    if(typeValue.value===1){
        const {msg,code} = await service.post(`/api/draw/versionAdd`,form)
        if(code===200){
                ElMessage(msg)
                getDateList()
                form.versionImg=''
                form.name=''
                imageUrl.value = ''
        }
    }else if(typeValue.value===2){
        const {msg,code} = await service.post(`/api/draw/versionSet`,{...form,'id':updateId.value})
        if(code===200){
            ElMessage(msg)
            getDateList()
            form.versionImg=''
            form.name=''
            imageUrl.value = ''
        }
        
    }
   
}

</script>

<style scoped>
.draw {
    font-size: 1rem;
}

/* el-card组件样式 */
.box-card {
    width: 96%;
    height: 90%;
    margin: 0 auto;
    margin-top: 1rem;
}

/* 添加、删除、搜索、查询、重置按钮一行显示 */
.btns_left,
.btns_middle,
.btns_right {
    display: inline-block;

}

.btns_middle {
    margin-left: 55%;
}

.btns_right {
    float: right;
}

/* 按钮样式 */
.el-button {
    width: 4.5rem;
    font-size: 0.6rem;
    font-weight: 600;
}

.el-input {
    width: 14rem;
    font-size: 0.6rem;
}

.el-select {
    width: 16rem;
    margin-left: 1rem;
}

.el-option {
    width: 16rem;
}

.el-select ::placeholder,
.el-input ::placeholder {
    font-size: 0.6rem;
}

.datatable {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.cz_btn {
    width: 3rem;
}

.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}</style>